使用Hexo搭建我的个人博客

  1. 安装Hexo
  2. 部署 Hexo (至 GitHub.io )
  3. 外观设置
    1. 设置NexT主题
    2. 设置中文
    3. 设置图标
    4. 设置标签及分类
  4. 创建文章
  5. 插入图片

安装Hexo

1、安装git

wsl自带git,不需要手动安装。

2、安装Node.js

# Using Ubuntu
curl -sL https://deb.nodesource.com/setup_current.x | sudo -E bash -
sudo apt-get install -y nodejs

由于wsl其原生网络极差,最好先给wsl配置上代理(git和npm)再进行后续工作。
我在pc上装了ccproxy可以开启代理服务器

3、为npm和git配置代理

# npm代理
npm config set proxy=http://{ip}:{port}

# git代理
git config --global http.proxy 'http://{ip}:{port}'

4、安装hexo

npm install -g hexo

5、创建hexo项目

hexo init <folder>
cd <folder>
npm install

6、本地测试

hexo server

访问localhost:4000

部署 Hexo (至 GitHub.io )

1、手动在 GitHub 新建一个名为 username.github.io 的代码仓库。

2、安装 hexo-deployer-git

npm install hexo-deployer-git --save

3、在 _config.yml (如果有已存在的请删除)添加如下配置:

deploy:
  type: git
  repo: https://github.com/<username>/<project>
  # example, https://github.com/hexojs/hexojs.github.io
  branch: gh-pages

4、部署

hexo clean && hexo deploy

5、查看 username.github.io 上的网页是否部署成功。

外观设置

设置NexT主题

1、安装Next

cd hexo   # 进入博客根目录
git clone https://github.com/theme-next/hexo-theme-next themes/next

2、生效

修改 _config.yml 文件,设置 theme: next

3、重新部署

hexo clean && hexo g && hexo d
设置中文

修改_config.yml文件,将将language修改即可

language: zh-CN
设置图标

把图片(png或jpg格式,不是favicon.ico)放在themes/next/source/images里,然后打开 主题配置文件 找到favicon,将small、medium、apple_touch_icon三个字段的值都设置成/images/图片名.jpg

设置标签及分类

参考:https://juejin.cn/post/6844903830216261645

创建文章

hexo new "文章名"

PS:后续的文章中,尽量督促自己采用标准的中文文案排版

插入图片

1、安装图片插件

npm install https://github.com/CodeFalling/hexo-asset-image --save

2、在 _config.yml 配置文件中,修改为 post_asset_folder: true

3、在 _post 目录下创建一个与.md文件名字相同的文件夹(后续创建文章会自动生成此文件夹)

4、markdown中通过![](图片的相对路径.jpg)的方式插入图片

5、无法显示图片就去检查一下_config.yml文件是否设置了url和root

url: http://popomen.top/
root: /

转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 nz_nuaa@163.com
github